篩選資料類別

我們可以透過map方法來篩選出資料的類別。

這裡附上 filter 和 map的差別 : ES6 map和filter的區别

<li class="list-group-item cateList" v-for="(item, i) in filterCategory" :key="i">
{{item}} ({{filterCateNum[item]}})</li>

data(){
  return{
    productsAll: []
  }
}
computed:{
     filterCategory () {
      // 提取出category
      const array = this.productsAll.map((item) => item.category)
      // 過濾出重複的元素
      return [...new Set(array)]
    },
}

篩選類別數量

計算出資料中同類別的數量。

computed:{
  filterCateNum () {
  // 取出每個category的數量
  const cateNum = {}
  this.productsAll.forEach((item) => {
      // 假如沒有這個類別的話，就創造一個並賦予值為1個
    if (!cateNum[item.category]) {
      cateNum[item.category] = 1
        // 假如已經有這個類別的話就+1
    } else {
      cateNum[item.category] += 1
    }
  })
  return cateNum
  }
}

對資料進行排序

我們將使用sort來進行資料排序，排序項目分別為 年份排序 與 價格排序。

這裡的html我們選用select來做，並用v-model綁定一個selectAnswer的值。

<select class="form-select form-select-sm bg-light w-auto" style="box-shadow:none"
    v-model="selectAnswer">
  <option selected value =''>簡易篩選</option>
  <option value='publication_date'>年份 : 由新到舊</option>
  <option value='price'>價格 : 由高至低</option>
</select>

然後在methods中定義一個sortByDate的方法，至於為什麼不能在computed中調用，
請見這篇對於這個問題的說明~

data () {
    return {
      selectAnswer: ''
    }
  },
methods:{
    sortByDate () {
      if (this.selectAnswer) {
        this.products.sort((a, b) => b[this.selectAnswer] > a[this.selectAnswer] ? 1 : -1)
      }
    }
}

最後對selectAnswer設監聽，每當selectAnswer的值有變動，就執行sortByDate方法，如此就完成簡單的排序功能啦!

watch:{
    selectAnswer: {
      handler (value) {
        this.sortByDate()
      },
      deep: true
    }
}

注意

這裡的sort方法之所以不寫成 a-b 或 b-a 而是採用三元運算子的寫法，
原因在於我所排序的對象是「字串」而非「數字」，
假設我今天排序的對象是數字，就可以用 a-b 或 b-a 這種方法取得了~